<!-- directive:title 顶部菜单各色工具内容 重点是整整齐齐 -->
<!-- directive:breadcrumb 顶部菜单样式 -->
<div class="panel-body">
    <uib-tabset class="tab-container">
        <uib-tab heading="整整齐齐">
            <p>重点是整整齐齐</p>
            <div class="row" style="width: 100%;">
                <div class="col-sm-12" style="border-top:1px solid red;">
                    <ul class="yx-navbar">
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <span>首页</span>
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <span>会员服务</span>
                                <img src="" style="width:20px;height:20px;" alt="">
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <span>营销插件</span>
                                <img src="" style="width:20px;height:20px;" alt="">
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <span>微购</span>
                                <img src="" style="width:20px;height:20px;" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12" style="border-top:1px solid red;">
                    <ul class="yx-navbar">
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-call-in"></i>
                                <span>400-800-1234</span>
                            </div>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item">
                            <div>
                                <input type="text" placeholder="请输入姓名/手机号/会员卡" value="" style="width:300px">
                                <i class="icon-magnifier inputlogo"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-question"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item dropdown" uib-dropdown>
                            <div uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
                                <div class="thumb-xs avatar">
                                    <img src="http://via.placeholder.com/34x34" alt="...">
                                    <i class="on bottom"></i>
                                </div>
                                <span>HI，{{ loginname || '匿名用户' }}</span>
                                <i class="fa fa-fw fa-angle-down"></i>
                            </div>
                            <ul uib-dropdown-menu class="animated fadeInDown w-xs">
                                <li> <a href="#"> <span class="badge bg-danger pull-right">牛</span> <span>工作环境</span> </a> </li>
                                <li> <a href="#"> <span class="badge bg-danger pull-right">常用</span> <span>添加新标签</span> </a> </li>
                                <li> <a href="javascript:;" ng-click="logout()">退出</a> </li>
                            </ul>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-power"></i>
                                <span>退出</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-6" style="border-top:1px solid red;">
                    <ul class="yx-navbar">
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-volume-1"></i>
                                <span class="text-danger">重要通知,内部系统 禁止外传</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-6" style="border-top:1px solid red;">
                    <ul class="yx-navbar pull-right">
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-user"></i>
                                <span>隔壁的人猿泰山</span>
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <i class="fa fa-expand"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <i class="fa fa-bell-o"></i>
                                <span class="badge">3</span>
                            </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <i class="fa fa-tasks"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item">
                            <div>
                                <i class="icon-power"></i>
                                <span>退出</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12" style="border-top:1px solid red;">
                    <ul class="yx-navbar">
                        <li class="yx-navbar-item yx-navbar-title">
                            <div> <img src="http://via.placeholder.com/200x45" alt="" style=" height: 45px; "> </div>
                        </li>
                        <li class="yx-navbar-item yx-navbar-title">
                            <div>
                                <div class="yx-navbar-item-small">怀特店</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12" style="border-top:1px solid red;">
                    <ul class="yx-navbar pull-right">
                        <li class="yx-navbar-item li4" ng-click="zhgl()">
                            <div>
                                <img class="header-img " src="http://via.placeholder.com/20x20">
                                <span>账户管理设置</span>
                            </div>
                        </li>
                        <li class="yx-navbar-border"></li>
                        <li class="yx-navbar-item dropdown" uib-dropdown>
                            <div uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
                                <span>HI，{{ shopInfo.Busi_Name || "超级管理员" }}</span>
                                <i class="fa fa-fw fa-angle-down"></i>
                            </div>
                            <ul uib-dropdown-menu class="w-xs">
                                <li> <a href="#"> <span>修改密码</span> </a> </li>
                                <li> <a href ng-click="logout()"> <span>退出</span> </a> </li>
                            </ul>
                        </li>
                        <li class="yx-navbar-item">
                            <div>
                                <input type="text" placeholder="请输入姓名/手机号/会员卡" value="" style=" width:240px ">
                                <i class="icon-magnifier inputlogo"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-item li4 dropdown" uib-dropdown>
                            <div uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
                                <img class="header-img " src="http://via.placeholder.com/20x20">
                            </div>
                            <ul uib-dropdown-menu class="w-xs">
                                <li> <a href="#"> <span>修改密码</span> </a> </li>
                                <li> <a href ng-click="logout()"> <span>退出</span> </a> </li>
                            </ul>
                        </li>
                        <li class="yx-navbar-item li4" ng-click="goNotify()">
                            <div>
                                <img class="header-img " src="http://via.placeholder.com/20x20">
                                <i class="badgeuptag" ng-if="newNotify"></i>
                            </div>
                        </li>
                        <li class="yx-navbar-item dropdown" uib-dropdown>
                            <div uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
                                <span>HI，{{ shopInfo.Busi_Name || "系统管理员" }}</span>
                                <i class="fa fa-fw fa-angle-down"></i>
                            </div>
                            <ul uib-dropdown-menu class="w-xs">
                                <li> <a href="#"> <span>修改密码</span> </a> </li>
                                <li> <a href ng-click="logout()"> <span>退出</span> </a> </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12" style="border-top:1px solid red;">
                </div>
            </div>
        </uib-tab>
        <uib-tab heading="图片和文本对齐">
            <p> 首先解决一下膈应的图片和文本对齐问题 </p>
            <div class="gyimg">
                <img src="../../images/head.zhishui.jpg" alt="" />
                <span>会员管理</span>
                <div class="bgicon bgicon1"></div>
                <div class="bgicon bgicon2"></div>
                <div class="bgicon bgicon3"></div>
                <div class="bgicon bgicon4"></div>
                <div class="bgicon bgicon5"></div>
                <div class="bgicon bgicon6"></div>
                <div class="bgicon bgicon7"></div>
                <div class="bgicon bgicon8"></div>
                <div class="bgicon bgicon9"></div>
                <span>会员管理</span>
            </div>
            <style type='text/css' ui-bs>
                .gyimg{ display: flex; align-items: center; padding: 0; height: 70px; margin: 0; }
                .gyimg .bgicon{ background-image: url(./images/splite.menu_c.png); background-repeat: no-repeat; width: 20px; height: 19px; background-size: 18px 162px; margin-right: 10px; }
                .gyimg .bgicon:hover{ background-image: url(./images/splite.menu_r.png);}
                .gyimg .bgicon1{ background-position: 2px 0; }
                .gyimg .bgicon2{ background-position: 2px -18px; }
                .gyimg .bgicon3{ background-position: 2px -36px; }
                .gyimg .bgicon4{ background-position: 2px -54px; }
                .gyimg .bgicon5{ background-position: 2px -72px; }
                .gyimg .bgicon6{ background-position: 2px -90px; }
                .gyimg .bgicon7{ background-position: 2px -108px; }
                .gyimg .bgicon8{ background-position: 2px -126px; }
                .gyimg .bgicon9{ background-position: 2px -144px; }
                .gyimg img{ position: relative; display: block; white-space: nowrap; display: inline-block; width: 34px; border-radius: 500px; margin-right: 10px; }
                .gyimg span{ font-size: 15px; font-weight: bold; color: #474e5d; letter-spacing: 0; line-height: 44px; text-align: left;}
            </style>
        </uib-tab>
        <uib-tab heading="hover改变border效果">
            <p>以前我们用border做hover 但是会影响其他元素 现在可以用box-shadow</p>
            <style type='text/xianjs' ui-bs>
                .xxx{border-top: 1px solid #fff;}
                .xxx{border-top: 1px solid red;}
                /***************************/
                .xxx{box-shadow: inset 0 2px #5974d9;} /* c3 支持ie9以上 */
                /***************************/
                .xxx{outline:#00ff00 solid 1px;} /* 缺陷 语法与border略不同 不能指定上下左右 */
            </style>
        </uib-tab>
    </uib-tabset>
</div>